<template>
<div class="bg-white">
    <div class="bg-toolbar">
        <DatePicker v-model="value2" format="yyyy-MM-dd" @on-change="changeDate" type="daterange" placement="bottom-end" placeholder="选择时间段" style="width: 200px"></DatePicker>
        &nbsp;&nbsp;&nbsp;
        <Button type="primary" @click="refreshData" icon="ios-search">搜索</Button>
    </div>
    <Card shadow :bordered="false">
        <div ref="dom2" :style="`height:${height1}px;`"></div>
    </Card>
</div>

</template>

<script>
import echarts from 'echarts'
import { getNowDate, formatDate } from '../../libs/tools'
import { queryActiveUserNum } from '@/api/userAnalysis'
export default {
  data () {
    return {
      height1: 500,
      value2: [getNowDate(), getNowDate()],
      dom2: null
    }
  },
  methods: {
    changeDate (date) {
      this.value2 = date
    },
    refreshData () {
      this.dom2.showLoading()
      queryActiveUserNum({
        startTime: formatDate(this.value2[0]),
        endTime: formatDate(this.value2[1])
      }).then(data => {
        this.dom2.setOption(this.getData(
          data
        ))
        this.dom2.hideLoading()
      }).catch(_ => {
        this.dom2.hideLoading()
      })
    },
    resize () {
      // this.dom2.resize()
    },
    getData (d2) {
      let xData
      if (Array.isArray(d2)) {
        xData = []
        for (let i = 0; i < 24; i++) {
          xData.push(i)
        }
      } else {
        xData = Object.keys(d2).sort()
        const yData = []
        xData.forEach(key => {
          yData.push(d2[key])
        })
        d2 = yData
      }
      let startTime = formatDate(this.value2[0])
      let endTime = formatDate(this.value2[1])
      let title = ''
      if (startTime === endTime) {
        title = startTime
      } else {
        title = `${startTime} 至 ${endTime}`
      }
      const option = {
        legend: {},
        title: {
          text: title + ' 活跃用户',
          textStyle: {
            align: 'center',
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '15%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#BAD9FF'
            } },
            data: d2
          }
        ]
      }
      return option
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.dom2 = echarts.init(this.$refs.dom2)
      this.dom2.showLoading()
      queryActiveUserNum({
        startTime: formatDate(this.value2[0]),
        endTime: formatDate(this.value2[1])
      }).then(data => {
        this.dom2.hideLoading()
        this.dom2.setOption(this.getData(
          data
        ))
      }).catch(_ => {
        this.dom2.hideLoading()
      })
    })
  },

  beforeDestroy () {
  }
}
</script>
<style>
.bg-white{
 background: #fff;
 padding:30px;
}
.bg-toolbar{
    padding-bottom: 30px;
}
</style>
